<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827030341429776.png"
				class="image_1" />
			<view class="flex-col group_1">
				<view class="flex-col section_1">
					<view class="justify-between section_2"
						@click="go('pages/index/editHourse?id='+homeInfo.projectId)">
						<text class="text_1">我的房屋信息</text>
						<image :src="$IMG_URL + '16557826925530282387.png'" class="image_2" />
					</view>
					<view class="justify-between group_2 view">
						<text class="text_2">房屋位置</text>
						<text
							class="text_4">{{homeInfo.provinceName}}{{homeInfo.cityName}}{{homeInfo.districtName}}</text>
					</view>
					<view class="justify-between group_3">
						<text class="text_6">详细地址</text>
						<text class="text_7">{{homeInfo.position}}</text>
					</view>
					<view class="justify-between group_2 view_1">
						<text class="text_2 text_8">房屋面积</text>
						<text class="text_4 text_9">{{homeInfo.roomArea}}m²</text>
					</view>
					<view class="justify-between group_4">
						<text class="text_10">房屋类型</text>
						<text class="text_11">{{homeInfo.roomTypeName}}</text>
					</view>
				</view>
				<view class="flex-col section_3">
					<view class="flex-col">
						<view class="flex-row group_6">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_3" />
							<text class="text_12">服务内容</text>
						</view>
						<text class="text_13 text_14">
							为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
						</text>
					</view>
					<text class="text_13">
						为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
					</text>
					<text class="text_13">
						为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
					</text>
					<text class="text_17">根据地域判断是否需要超限补偏远费！</text>
					<view class="justify-between group_7" @click="couponShow=true">
						<text class="text_18">选择优惠券</text>
						<view class="flex-row group_8">
							<text class="text_19">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
							<view class="image_4">
								<u-icon name="arrow-right" color="#BFBFBF" size="28"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col list" style="padding-bottom: 60px;">
					<view class="flex-col list-item">
						<view class="flex-row">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_5" />
							<text class="text_20">服务流程</text>
						</view>
						<view class="flex-col items-center group_10">
							<u-parse :content="content.serviceProcess"></u-parse>
						</view>
					</view>
					<view class="flex-col list-item">
						<view class="flex-row">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_5" />
							<text class="text_20">服务保障</text>
						</view>
						<view class="flex-col group_10 items-center">
							<u-parse :content="content.serviceGuarantee"></u-parse>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-row section_6">
				<view class="flex-row group_12">

					<view class="group_13">
						<text class="text_25">￥</text>
						<text class="text_26">{{payablePrice>0?payablePrice:'无数据'}}</text>
						<text class="text_34">￥{{totalPrice>0?totalPrice:'无数据'}}</text>
					</view>

				</view>
				<view class="flex-col items-center fixed" @click="go('/pages/my/message/kefu')">
					<image :src="$IMG_URL + '16557826925516947131.png'" class="image_11" />
					<text class="text_28">在线咨询</text>
				</view>
				<view class="flex-col text-wrapper" @click="submits"><text class="text_29">确认</text></view>
			</view>
		</view>
		<shop-coupon v-if="couponShow" :amount="payablePrice" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				coupon_id: null,
				coupon: [],
				couponShow: false,
				couponAmount: 0,
				homeInfo: {},
				totalPrice: 0.00,
				payablePrice: 0.00,
				content: {}
			};
		},
		
		onShow() {
			this.$store.dispatch('checkHouse');	 	
			this.rooms();
			this.getcontent();
			this.getCoupon();
		},
		methods: {
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 8
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;
				this.coupon_id = couponsId;
				this.couponAmount = amount;
				this.couponShow = false;
				this.calcuWholeProcessPrice();
			},
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			rooms() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {
						this.homeInfo = r.data.project
						this.calcuWholeProcessPrice()
					}
				});
			},
			calcuWholeProcessPrice() {
				var coupon_ids = this.coupon_id > 0 ? this.coupon_id : ''
				var infos = {
					areaId: this.homeInfo.district,
					projectId: this.homeInfo.projectId,
					couponsId: coupon_ids,
					serviceTypeId: 36,
				}
				this.$http('harryroom.calcuWholeProcessPrice', infos).then(r => {
					if (r.code == 200) {
						this.totalPrice = r.data.totalPrice
						this.payablePrice = r.data.payablePrice
					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			submits() {

				console.log(this.couponAmount)
				var info = {
					projectId: this.homeInfo.projectId, //项目id
					couponsId: this.coupon_id, //优惠券id
					couponsMoney: 0, //优惠券金额
					totalMoney: this.totalPrice, //总额
					payableMoney: (this.totalPrice - this.couponAmount).toFixed(2), //应付款
					ordersType: 8, //订单类型(1全流程咨询 2设计优化 3审核/合同签约 4主材咨询 5施工巡检 6验收 7选材咨询 8全流程管家)
				}
				this.$http('harryroom.buyWholeProcessConsult', info).then(r => {
					console.log(r)
					if (r.code == 200) {
						this.$u.toast(r.msg);
						this.go('/pages/pay/pay?orderid=' + r.data);
					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.fixed {
		position: fixed;
		margin-left: 375rpx;
	}

	.group_2 {
		padding-left: 24rpx;
		padding-right: 22rpx;
	}

	.text_13 {
		margin-top: 58rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: left;
		text-indent: 37rpx;
	}

	.list-item {
		padding: 29rpx 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_10 {
		margin-top: 40rpx;
	}

	.image_5 {
		margin-top: 13rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_20 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group_1 {
		margin-top: -47rpx;
		padding: 0 24rpx;
		position: relative;
	}

	.section_6 {
		height: 102rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #00000014;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.section_1 {
		padding-bottom: 41rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_3 {
		margin-top: 20rpx;
		padding: 29rpx 24rpx 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list {
		padding-top: 20rpx;
	}

	.group_12 {
		flex-shrink: 0;
		align-self: center;
		margin-left: 24rpx;
	}

	.group_14 {
		/* 	position: absolute;
		margin-left: 390rpx;
		margin-bottom: 5rpx;
		flex: 1 1 auto; */
	}

	.text-wrapper {
		position: fixed;
		left: 499rpx;
		background-color: #1d6aff;
		border-radius: 36rpx;
		width: 220rpx;
		height: 72rpx;
	}

	.section_2 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.view {
		margin-top: 30rpx;
	}

	.group_3 {
		margin: 39rpx 23rpx 0 24rpx;
	}

	.view_1 {
		margin-top: 46rpx;
	}

	.group_4 {
		margin-top: 33rpx;
		padding-left: 24rpx;
		padding-right: 23rpx;
	}

	.text_17 {
		margin-top: 55rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_7 {
		margin-top: 39rpx;
		padding: 31rpx 0 20rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.group_13 {
		height: 38rpx;
	}

	.text_27 {
		margin-left: 15.5rpx;
		margin-top: 8rpx;
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		text-decoration: line-through;
	}

	.image_11 {
		width: 44rpx;
		height: 42rpx;
	}

	.text_28 {
		color: #666666;
		margin-top: 6rpx;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_29 {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_1 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_2 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.text_6 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: right;
		width: 369rpx;
	}

	.text_8 {
		margin-bottom: 6rpx;
	}

	.text_9 {
		// margin-top: 6rpx;
	}

	.text_10 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_11 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_6 {
		height: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_14 {
		margin-top: 24rpx;
	}

	.text_18 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_8 {
		margin-top: 6rpx;
	}

	.image_10 {
		margin-top: 34rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 380rpx;
	}

	.text_25 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_26 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_34 {
		margin-top: 10rpx;
		margin-left: 10rpx;
		align-self: center;
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		/* line-height: 28rpx; */
		text-decoration: line-through;
	}

	.image_3 {
		margin-top: 10rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_12 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_19 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_4 {
		margin: 3rpx 15rpx 4rpx 12rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_23 {
		margin-top: 30rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_8 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}
</style>
